<template>
    <div class="">
        <!-- 表格 -->
        <el-table :data="metulist" border style="width: 100%" row-key="id" :tree-props="{children:'children'}" default-expand-all>
            <el-table-column label="菜单编号" width="80" prop="id">
            </el-table-column>
            <el-table-column label="菜单名称" width="200" prop="title">
            </el-table-column>
            <el-table-column label="上级菜单" width="80" prop="pid">
            </el-table-column>
            <el-table-column label="菜单图标" width="200" prop="icon">
                <!-- 开辟一个作用域槽口 用于修改数据内容 
                item自定义
                row是el-table 固定的代表行
                item.row 每一行的数据
                -->
                <template slot-scope="item">
                    <div>

                        <i :class="item.row.icon"></i>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="菜单地址" width="250" prop="url">
            </el-table-column>

            <el-table-column label="状态" prop="status">
                <template slot-scope="item">
                    <div v-if="item.row.status == 1">
                        <el-button type="success" plain disabled>启用</el-button>
                    </div>
                    <div v-else>
                        <el-button type="danger" plain disabled>禁用</el-button>
                    </div>
                </template>

            </el-table-column> 
            <el-table-column label="操作">
                <template slot-scope="item">
                    <div> 
                        <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(item.row.id)">编辑</el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(item.row.id)">删除</el-button>
                    </div>
                </template>

            </el-table-column>
        </el-table>
    </div>
</template>
<script>
// import { getMenuList } from '../../request/api'
// 引入辅助性函数
import { mapGetters, mapActions } from 'vuex'
import { menuDel } from '../../request/api'
export default {
    data() {
        return {

        }
    },
    computed: {
        ...mapGetters({
            metulist: 'menu/getMenu'
        })
    },
    mounted() {
        // console.log(this.$store);
        this.getMenuAction()
        // getMenuList().then(res => {
        //     console.log(res, '////////');
        // })
    },
    methods: {
        ...mapActions({
            getMenuAction: 'menu/getMenuAction'
        }),
        edit(id) {
            this.$emit('edit',id)
        },
        del(id) {
            this.$confirm('你确定要删除这条数据吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 调用删除接口
                menuDel({id}).then(res => {
                    console.log(res, '删除');
                    if(res.code==200){
                        this.$message.success(res.msg)
                        // 重新触发
                        this.getMenuAction()
                    }else{
                        this.$message.error(res.msg)  
                    }
                })
                //   this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                //   });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>
<style scoped>
.btnInfo {
    margin: 10px 5px;
}
</style>